最后,就要说说组件的尺寸是怎么设置了,这也是本系列文章的结尾。
首先我们要知道组件是什么,它是一个包含了控件、文字、图标的功能合集。可以是一个独立的信息展示单元,也可以完成一个复杂的操作流,是学习 App 设计中最重要的环节。
组件的尺寸原则
定义组件的长和宽,方式有两种,一种是根据环境制定,一种是根据内容调节。
第一种,即通过外部的元素来确定组件的尺寸。例如我们要设计一个头部的幻灯片组件,以左右可以滚动的形式展现。那么我们首先要根据想要幻灯片在屏幕中的占比来制定高度,例如我们觉得大致要有屏幕 1/3 的比例,那么可以设定高度为 220pt(664除3),而根据上下对齐的原则,左右就由屏幕宽减去左右内边距 16pt 即可。
第二种,是根据我们里面添加的元素来确定宽和高。例如在首页幻灯片下方,添加左右滚动的卡片,那么我们先设定里面的控件和文字尺寸,然后再通过制定内边距的形式确定组件的尺寸。
当然,也有混合的定义方式,如一开始订好宽,根据内容设定高,像花瓣瀑布流的卡片,或者定义好高来调节宽。具体使用什么形式,就要因地制宜了。
下面会通过几个常见的组件案例,来演示如何定义它们的尺寸的。
动态卡片
动态卡片是很常用的组件,通常以卡片的形式展现。每条动态通常占据内容区域的整列,即左右减去制定好的内边距 16pt,那么就是 375-32 = 343pt 的宽。而高度,就要根据里面所包含的元素了,如下图所示。
设置列表
设置列表中,由高度相同的列表项组成,它们的高和宽应该是根据设计的风格一开始就制定好,如比较紧凑的风格我们采用 48pt 的高,比较宽松的风格就采用 64pt 的高。然后我们再排列内部的元素,进行水平居中。
班次信息
常见的班次信息,我们在定义它尺寸时,也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt宽吗,再填入对应的字段内容。
这时候可以将上下的内容拆分成3个不同的子模块,班次、时间、更多操作,班次和更多操作采用固定高度 44pt 的方式,时间则根据内容设置边距的方式,最后得到的高度总和,就是班次信息组件的高度。
瓷片区
主流的瓷片区,其实也由如果子模块组合而成,而如淘宝这类会有很多瓷片区并列的状态,我们优先要考虑的,是每个瓷片区在屏幕中的占比,也就是先定义好瓷片区的高度,再拆分内容的子模块。
例如划分为两行的瓷片区,总高度为 280pt,上方的模块高度为 180pt,下方的模块高度为 100pt,里面的元素,再根据这个内容区域进行排版。
完成一个完整的组件,是根据它的内容和周围的环境决定,我们只要感觉前面几个部分所说的参数设置进行分解,就可以很轻松的定义出组件的实际尺寸。而无论任何组件,它们都没有固定的尺寸值,需要大家不断的练习掌握制定的思路。之后再设计完整的页面,或整套应用时,就能大大提升效率和设计质量。
结尾
有目的和逻辑性的对参数进行设置,是 UI 设计中最重要的一环!想要真正掌握它们,就一定要多做练习进行巩固。相信任何人都可以在这个过程中发现 UI 设计的乐趣。
以上的内容受限篇幅(实在写不动了...),专注于元素尺寸的设置方法,关于配色、字体属性、图片使用的方法在以后有时间会继续更新。
暂无评论
违反法律法规
侵犯个人权益
有害网站环境